import FirstTitle from "@/components/FirstTitle";
import EffectContainer from "@/components/effectContainer";
import SubTitle from "@/components/subTitle";
import { useEffect, useState } from "react";
import { Descriptions } from "antd";
import { Description } from "@/components/description";

export const Hardware = () => {
  const [items, setItems] = useState([
    {
      key: "1",
      label: "当前电量",
      children: "",
    },
    {
      key: "2",
      label: "充电状态",
      children: "",
    },
    {
      key: "3",
      label: "充满所需时间",
      children: "",
    },
    {
      key: "4",
      label: "放空电所需时间",
      children: "",
    },
  ]);
  /**
   * 获取电池信息
   */
  const getBattery = () => {
    if ("getBattery" in navigator) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      navigator
        .getBattery()
        .then(function (battery) {
          setItems([
            {
              key: "1",
              label: "当前电量",
              children: battery.level * 100 + "%",
            },
            {
              key: "2",
              label: "充电状态",
              children: battery.charging ? "正在充电" : "未充电",
            },
            {
              key: "3",
              label: "充满所需时间",
              children: battery.chargingTime + "秒",
            },
            {
              key: "4",
              label: "放空电所需时间",
              children: battery.dischargingTime + "秒",
            },
          ]);
          // 初始获取电池信息
          console.log("当前电池电量: " + battery.level * 100 + " %");
          console.log(
            "充电状态: " + (battery.charging ? "正在充电" : "未充电"),
          );
          console.log("充满电所需时间: " + battery.chargingTime + " 秒");
          console.log("防空电所需时间: " + battery.dischargingTime + " 秒");

          // 监听电池状态变化
          battery.addEventListener("levelchange", function () {
            console.log("电量已更新: 当前电量为" + battery.level * 100 + "%");
            setItems([...items]);
          });

          battery.addEventListener("chargingchange", function () {
            console.log(
              "充电状态已变更: " + (battery.charging ? "正在充电" : "未在充电"),
            );
          });

          battery.addEventListener("chargingtimechange", function () {
            console.log(
              "充满电所需时间更新: 剩余" + battery.chargingTime + "秒",
            );
          });

          battery.addEventListener("dischargingtimechange", function () {
            console.log(
              "放空电所需时间更新: 剩余" + battery.dischargingTime + "秒",
            );
          });
        })
        .catch(function (error) {
          // 处理获取电池对象失败的情况
          console.error("获取电池信息失败:", error);
        });
    } else {
      // 处理浏览器不支持Battery API的情况
      console.log("当前浏览器不支持Battery API");
    }
  };
  useEffect(() => {
    getBattery();
  }, []);
  return (
    <>
      <FirstTitle title="硬件 API"></FirstTitle>
      <SubTitle title="获取设备电池信息"></SubTitle>
      <Description
        info={<h2 style={{ color: "red" }}>*该功能需要使用https</h2>}
      />
      <EffectContainer
        effect={
          <div style={{ padding: "10px" }}>
            <Descriptions title="电池信息" items={items} />
          </div>
        }
      ></EffectContainer>
    </>
  );
};
